<template>
  <div>
    <Breadcrumb :items="['系统管理', '令牌管理']" />
    <a-card class="general-card" title="令牌管理">
      <template #extra>
        <a-space direction="horizontal" :size="18">
          <a-button v-authorities="[AUTH_PM.TOKEN_READ]" type="primary" :loading="loading" @click="refresh()">
            <template #icon>
              <icon-refresh />
            </template>
            刷新
          </a-button>
        </a-space>
      </template>
      <!--分割线-->
      <a-divider direction="horizontal" />
      <a-table
        :columns="tableColumns"
        :data="tbData"
        :loading="loading"
        row-key="id"
        :pagination="pagination"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"/>
    </a-card>
</div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from 'vue'
import useLoading from '@/hooks/loading'
import type { UserToken } from '@/types/modules/auth'
import { revokeToken, tokenWithPagination } from '@/api/modules/auth/oauth'
import { Message, PaginationProps } from '@arco-design/web-vue'
import usePaging from '@/hooks/paging'
import { AUTH_PM } from '@/types/PM'

const tableColumns = [{
  title: "用户id",
  dataIndex: "id",
}, {
  title: '用户名',
  dataIndex: 'username'
}, {
  title: '手机号',
  dataIndex: 'phone'
},{
  title: '客户端',
  dataIndex: 'clientId'
}, {
  title: '类型',
  dataIndex: 'type'
},{
  title: '令牌',
  dataIndex: 'accessToken'
},{
  title: '过期时间',
  dataIndex: 'expire'
},{
  title: "操作",
  width: 100,
  align: "right",
  fixed: "right",
  render: ({ record }: { record: any }) => {
    return <>
    <a-popconfirm content={`是否强制${record.accessToken}下线`} type="warning" onOk={() => forceOffline(record.accessToken)}>
    <a-button v-authorities={Array.of(AUTH_PM.REVOKE_TOKEN)} type="text" size="small">
      强制下线
    </a-button>
    </a-popconfirm>
      </>
  }
}]

const tbData = ref<UserToken[]>([]);
const { loading, setLoading } = useLoading();
const { pageable, setPageable } = usePaging();
const pagination = ref<PaginationProps>({
  defaultCurrent: 1,
  defaultPageSize: 10
});

const refresh = async () => {
  setLoading(true)
  const { data } = (await tokenWithPagination(pageable.value))
  pagination.value = {
    current: data.current,
    pageSize: data.size,
    total: data.total,
    showTotal: true,
    showPageSize: true
  };
  tbData.value = data.records;
  setLoading(false)
}

const onPageChange = (page: number) => {
  setPageable(page - 1, pageable.value.size);
  refresh();
};

const onPageSizeChange = (pageSize: number) => {
  setPageable(pageable.value.page, pageSize);
  refresh();
};

const forceOffline = async (accessToken: string) => {
  setLoading(true)
  try {
    await revokeToken(accessToken)
    Message.success({
      content: `${accessToken}已下线`,
      duration: 3000,
    })
  } finally {
    await refresh()
    setLoading(false)
  }
}

onMounted(async () => {
  await refresh();
});
</script>

<script lang="tsx">
export default {
  name: 'Token'
}
</script>

<style scoped>

</style>
